<script lang="ts" setup>
import { useVModel } from "@/utils/useVModel";
import { getToken } from "@/utils/localToken";
import { imgApiUrl } from "@/services/upload";
import quillEditor from "@/components/quillEditor/index.vue";
const props = defineProps({
	modelValue: {
		type: Object,
		required: true,
	},
	courseTypeList: {
		type: Array<{ id: number; name: string }>,
		default: () => [],
	},
});
const emit = defineEmits(["update:modelValue"]);

const model = useVModel(props, "modelValue", emit);

const formRef = ref();
const instance = getCurrentInstance();
onMounted(() => {
	if (instance && instance.exposed) {
		const entries = Object.entries(formRef.value.$.exposed);

		for (const [key, value] of entries) {
			instance.exposed[key] = value;
		}
	}
});

defineExpose(instance && instance.exposed ? { ...instance.exposed } : {});
const rules = ref({
	courseTitle: [{ required: true, message: "请输入文章标题", trigger: "change" }],
	courseType: [{ required: true, message: "请选择文章类型", trigger: "change" }],
});

const headers = computed(() => {
	return { Authorization: getToken() };
});
</script>

<template>
	<el-form :model="model" :rules="rules" label-width="auto" ref="formRef">
		<el-form-item label="文章标题：" prop="courseTitle">
			<el-input v-model="model.courseTitle" placeholder="请输入文章标题" />
		</el-form-item>

		<el-form-item label="文章类型：" prop="courseType">
			<el-select v-model="model.courseType" placeholder="请选择文章类型">
				<el-option v-for="item in courseTypeList" :key="item.id" :label="item.name" :value="item.id" />
			</el-select>
		</el-form-item>
		<el-form-item label="排序：" sprop="sort">
			<el-input v-model="model.sort" type="number" />
		</el-form-item>
		<el-form-item label="视频：" v-if="model.courseType === 2" prop="courseContent">
			<el-upload
				class="avatar-uploader"
				:action="imgApiUrl"
				:headers="headers"
				accept="video/*"
				name="files"
				:show-file-list="false"
				:on-success="(response:any) => model.courseContent = response?.data[0]"
			>
				<video style="width: 100px; height: 100px" v-if="model.courseContent" :src="model.courseContent"></video>
				<el-icon v-else class="avatar-uploader-icon"><IconSvg name="add" /></el-icon>
			</el-upload>
		</el-form-item>
		<el-form-item label="内容：" v-else prop="courseContent">
			<quillEditor v-model="model.courseContent" />
		</el-form-item>
		<el-form-item label="封面：" prop="courseCoverImage">
			<el-upload
				class="avatar-uploader"
				:action="imgApiUrl"
				:headers="headers"
				accept="image/*"
				name="files"
				:show-file-list="false"
				:on-success="(response:any) => model.courseCoverImage = response?.data[0]"
			>
				<img v-if="model.courseCoverImage" :src="model.courseCoverImage" class="avatar" />
				<el-icon v-else class="avatar-uploader-icon"><IconSvg name="add" /></el-icon>
			</el-upload>
		</el-form-item>

		<el-form-item label="是否精选：" prop="isChoice">
			<el-switch v-model="model.isChoice" :active-value="1" :inactive-value="0" />
		</el-form-item>
		<el-form-item label="状态：" prop="isShow">
			<el-switch v-model="model.isShow" :active-value="1" :inactive-value="0" />
		</el-form-item>
	</el-form>
</template>
<style lang="scss" scoped>
:deep(.avatar-uploader) {
	.el-upload {
		position: relative;
		overflow: hidden;
		cursor: pointer;
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		transition: var(--el-transition-duration-fast);
	}
	.obscuration {
		position: absolute;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100px;
		height: 100px;
		padding: 20px;
		background: rgb(0 0 0 / 20%);
	}
	.el-upload:hover {
		border-color: var(--el-color-primary);
	}
	img {
		width: 100px;
		height: 100px;
	}
	.el-icon.avatar-uploader-icon {
		width: 100px;
		height: 100px;
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
}
</style>
